{% extends "base/base_width_left.html" %}
{% load staticfiles %}
{% load pagination_tags %}
{% block style %}
   <link rel="stylesheet" href="{% static 'autosearch/css/styles.css' %}"/>
{% endblock %}
{% block flag %}playbooks{% endblock %}
{% block path %}
    <a href="" title="" class="tip-bottom"> 剧本管理</a>
{% endblock %}

{#{% block searchname %}searchaction{% endblock %}#}
{#{% block searchtip %}订单编号{% endblock %}#}

{% block container %}
    {{ block.super }}
    {% autopaginate server_list %}
    <ul class="nav nav-tabs">
        <li role="presentation"><a href="{% url 'playbooks:editor' pbid=play_book.id %}">管理编辑</a></li>
        <li role="presentation"><a href="{% url 'playbooks:file_list' %}?pbid={{ play_book.id }}">版本列表</a></li>
        <li role="presentation" class="active"><a href="{#% url 'product:theme_list' %#}">剧本运行</a></li>
    </ul>
    <div hidediv="hide" class="center-block">
        <div class="panel panel-default">
            <div class="panel-heading"><span><h4>{{ play_book.name }}</h4></span></div>
            <ul class="list-group">
                <li class="list-group-item"><span>剧本名称:</span><span
                        style="padding-left: 35%;text-align: center">{{ play_book.name }}</span></li>
                <li class="list-group-item"><span>功能类型:</span><span
                        style="padding-left: 35%;text-align: center">{{ play_book.function_name }}</span></li>
                {#                    <li class="list-group-item"><span>剧本类型:</span><span style="padding-left: 35%;text-align: center">{{ play_book.books_type }}</span></li>#}
                {#                    <li class="list-group-item"><span>剧本路径:</span><span style="padding-left: 35%;text-align: center">{{ play_book.path }}</span></li>#}
                <li class="list-group-item"><span>系统类型:</span><span
                        style="padding-left: 35%;text-align: center">{{ play_book.system_type }}</span></li>
                {#                    <li class="list-group-item"><span>剧本描述:</span><span style="padding-left: 35%;text-align: center">{{ play_book.content }}</span></li>#}
                <li class="list-group-item">
                    <span>请选择剧本版本：</span>
                    <select name="fid" class="version ">
                        {% for file in play_book.playbooksfile_set.all %}
                            <option value="{{ file.id }}">{{ file.version }}</option>
                        {% endfor %}
                    </select>
                    <button type="button" class="btn btn-default run" style="margin: 5px 5px"
                            url="{% url 'playbooks:run' %}?pbid={{ play_book.id }}">运行剧本
                    </button>
                    <form method="get" class="" style="width: 40%;float: right;margin-right: 22%">
                        <span>请选择项目</span>
                        <input hidden name="manage"/>
                        <input class="input-sm" name="" id="id_server_manage"placeholder="输入项目"/>
{#                        <select name="manage" style="width: 10%;height: 25px">#}
{#                            <option value="">所有</option>#}
{#                            {% for manage in manage_list %}#}
{#                            <option value="{{ manage.id }}">{{ manage.name }}</option>#}
{#                            {% endfor %}#}
{#                        </select>#}
                        <input class="input-sm" name="searchaction" placeholder="输入节点ip搜索"/>
                        <button class="btn btn-default">搜索
                        </button>
                    </form>
                    <div style="clear: both"></div>
                </li>
            </ul>

            {#            <button type="button" class="btn btn-default run" style="margin: 5px 5px" url="{% url 'playbooks:run' %}?pbid={{ play_book.id }}">运行剧本</button>#}
        </div>
    </div>
    <form method="post" class="run_form">
        {% csrf_token %}
        <div hidediv="hide" class="table-responsive">
            <table class="table table-hover table-bordered ">
                <thead>
                <tr>
                    <th><input type="checkbox" class="all"></th>
                    <th>节点ip</th>
                    <th>节点端口</th>
                    <th>节点帐号</th>
                    <th>节点密码</th>
{#                    <th>服务器状态</th>#}
                    {#                <th>操作</th>#}
                    {#                <th>剧本路径</th>#}
                    {#                <th>更新时间</th>#}
                    <th>操作</th>
                </tr>
                </thead>
                {% for server in server_list %}
                    <tr>
                        <td>
                            <input type="checkbox" value="{{ server.id }}" name="sid"
                                   {% if server in play_book.server_set.all %}checked{% endif %}/>
                        </td>
                        <td>{{ server.ip }}</td>
                        <td>
                            {{ server.port }}
                        </td>
                        <td>{{ server.ssh_user }}</td>
                        <td>
{#                            {{ server.ssh_password }}#}
                            ******
                        </td>
{#                        <td>{{ server.get_status_display }}</td>#}
                        <td>
                            <a class="btn btn-default btn-sm"
                               href="{% url 'server:editor' sid=server.id %}">编辑
                            </a>
                            <a class="btn btn-default btn-sm"
                               href="{% url 'server:detail' pk=server.id %}">详情
                            </a>
{#                            <a class="btn btn-default btn-sm run"#}
{#                               url="{% url 'playbooks:run' %}">更新#}
{#                            </a>#}
                            <button class="btn deletebtn btn-default btn-sm"
                                    deleteurl="{% url 'server:delete' sid=server.id %} ">删除
                            </button>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="8"><p>没有查询到相关信息.</p></td>
                    </tr>
                {% endfor %}
            </table>
            {% paginate %}
            {#        <div class="pagination">#}
            {#            <span class="step-links">#}
            {#                {% if page_obj.has_previous %}#}
            {#                    <a href="?page={{ page_obj.prevous_page_number }}">上一页</a>#}
            {#                {% endif %}#}
            {#                <span class="current">#}
            {#                    page {{ page_obj.number }} of {{ paginator.num_pages }}.#}
            {#                </span>#}
            {#                {% if page_obj.has_next %}#}
            {##}
            {#                    <a href="?page={{ page_obj.next_page_number }}">下一页</a>#}
            {#                {% endif %}#}
            {#            </span>#}
            {#        </div>#}

        </div>
    </form>
{% endblock %}
{% block footjs %}
    <script type="application/javascript" src="{% static 'autosearch/js/jquery.mockjax.js' %}"></script>
<script type="application/javascript" src="{% static 'autosearch/js/jquery.autocomplete.js' %}"></script>
<script type="application/javascript" src="{% static 'autosearch/js/countries.js' %}"></script>
    <script>
        $('.all').on('click', function () {
            if ($(this).is(':checked')) {
                $('td').find('input[name="sid"]').prop('checked', true);
                {#                alert($('td').find('input[name="sid"]').attr('checked'))#}
            } else {
                $('td').find('input[name="sid"]').removeAttr('checked');
            }
        });
        $('.run').on('click', function () {
            var $form = $('.run_form');
            var $fid = $('.version').val();
            if (!$fid) {
                alert('请选择剧本版本')
            } else {
                if(is_server()){
                    var url = $(this).attr('url');
                    var url_all=url+'&fid='+$fid;
                    $.post(url_all, $form.serialize(), function (data) {
                        if (data == 1) {
                            alert('剧本已运行');
                            time_lazy();
                        } else {
                            alert('运行失败');
                        }
                    })
                }else{
                    alert('请选择一个服务器！');
                }
            }
        });
        function is_server(){
            var $sid_list=$("input[name='sid']");
            for(var i=0;i<$sid_list.length;i++){
                if($sid_list.eq(i).is(':checked')){
                    return true
                }
            }
            return false
        }
        //搜索匹配
     $("#id_server_manage").autocomplete({
        minChars: 1,
        maxHeight:300,
        serviceUrl:'{% url 'server:autocomplete' %}',
        //lookup: countriesArray,
        //lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
         //   var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
          //  return re.test(suggestion.value);
        //},
        onSelect: function(suggestion) {
            $('input[name="manage"]').val(suggestion.data);
        },
{#        onHint: function (hint) {#}
{#            $('#id_server_manage').val(hint);#}
{#        },#}
        onInvalidateSelection: function() {
           $('input[name="_manage"]').val('');
        }
 });
    </script>
{% endblock %}
